<template>
  <div class="mobile">
    <ul>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 1@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 2@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 3@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 4@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 5@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 6@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 7@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 8@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 9@2x.png')" alt="" />
      </li>
      <li>
        <img v-lazy="require('../../assets/imgs/图层 10@2x.png')" alt="" />
      </li>
      <li>
        <div class="form">
          <!-- <h2>立即咨询</h2> -->
          <div>
            <span>称呼：</span>
            <input
              class="ipn"
              type="text"
              v-model="name"
              placeholder="请输入称呼，如：牛先生"
            />
          </div>
          <div>
            <span>手机号：</span>
            <input
              class="ipn"
              type="text"
              v-model="tel"
              maxlength="11"
              placeholder="请输入手机号"
            />
          </div>
          <div>
            <span>区域：</span>
            <input
              class="ipn"
              type="text"
              v-model="area"
              placeholder="请输入加盟区域"
            />
          </div>
          <div class="submit-btn" @click="handleSubmit">提交</div>
        </div>
        <img src="../../assets/imgs/图层 11@2x.png" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      tel: "",
      area: "",
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      if (this.name == "") {
        alert("姓名不能为空");
        return;
      }
      if (this.tel == "") {
        alert("手机号不能为空");
        return;
      }
      this.$axios
        .post("SaasCustomer/submitSaasForm", {
          name: this.name,
          mobile: this.tel,
          area: this.area,
        })
        .then((res) => {
          if (res.data.code === 0) {
            alert("提交成功");
          } else {
            alert(res.data.msg);
          }
        });
    },
  },
};
</script>


<style lang="less" scoped>
.mobile {
  ul {
    margin: 0;
    padding: 0;
    li:nth-of-type(11) {
      position: relative;
    }
    li {
      display: flex;
      margin: 0;
      padding: 0;
      .form {
        // width: 100%;
        width: 1200px;
        position: absolute;
        top: 24%;
        left: 18%;
        z-index: 999;
        h2 {
          font-size: 80px;
          margin-bottom: 90px;
          position: relative;
          left: 40px;
          &::before {
            position: absolute;
            content: "";
            width: 20px;
            height: 85px;
            left: -40px;
            top: 10px;
            background: #4369e6;
          }
        }
        div {
          display: flex;
          align-items: center;
          margin-bottom: 80px;
          // padding: 100px 0;
          span {
            font-size: 65px;
            width: 350px;
            color: #777575;
          }
          .ipn {
            width: 98%;
            border: 1px solid #8a8888;
            font-size: 60px;
            height: 150px;
            padding-left: 25px;
            color: #777575;
            width: 95%;
            border-color: rgb(182, 182, 182);
            line-height: inherit !important;
            border-radius: 17px;
          }
        }
      }
      .submit-btn {
        font-size: 70px;
        background: #4369e6;
        border-radius: 20px;
        margin: 120px auto auto;
        padding: 40px 100px;
        text-align: center;
        color: #fff;
        display: block !important;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>